<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM文档对象</title>
</head>
<body>
<h1>通过alinkColor来设置链接的颜色</h1>
<div id="a1"><a href="http://www.z01.com">访问Zoomla!逐浪CMS官网</a></div>
<a href="javascript:" onclick="a2()">获取默认链接颜色</a>
<script>
document.linkColor=`red`;   //未点击时的颜色
document.alinkColor=`#7E8A5A`;  //点击时的颜色
document.vlinkColor=`#DCF58D`;  //点击过的颜色
function a2() {
    alert(`默认链接的颜色是：`+document.linkColor);
}
</script>

<hr>根据input中的颜色来传值: <br>
<form action="" name="form1">
默认的超连接颜色：
<input type="text" name="a3" value="#859" /> <br>
单击时的超连接颜色：
<input type="text" name="a4" value="#999" /> <br>
单击过的超连接颜色：
<input type="text" name="a5" value="#389" /> <br>
<input type="button" name="but" value="确定" onclick="setLinkc"/>
</form>
<div id="a1"><a href="http://www.z01.com">访问Zoomla!逐浪CMS官网</a></div>

<script>
function setLinkc() {
    document.linkColor=form1.a3.value;
    document.alinkColor=form1.a4.value;
    document.vlinkColor=form1.a5.value;
}
</script>

<h1>bgColor可以定义背景颜色,下面的例子实现每隔一秒自动变换颜色功能： </h1>
<script>
let anycolor=new Array(`#00ff66`,`#ffff99`,`#ffccff`,`#ffffff`,`#000000`,`#ccc`);
let n=0;
function changecolorpage() {
    n++
    if (n==(anycolor.length-1)) n=0;
        document.bgColor=anycolor[n];
        document.fgColor=anycolor[n-1];
        setTimeout(`changecolorpage()`,1000);
}
// changecolorpage()
</script>

<hr>根据下拉菜单选中颜色值改变网页颜色 <br>
<form action="" name="form2">
<select name="co1" onChange="changebg()">
<option value="black">黑色</option>
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="purple">紫色</option>
</select>
</form>
<script>
function changebg() {
    let bgColor=form2.co1.value;
    document.bgColor=bgColor;
}    
</script>

<h1>交互变色 ,fgColor和bgColor是内置函数，实现前后景的换色。</h1>
<style>body{ bgcolor="#FFCCFF"}</style>
逐浪软件，创造中国最好的web前端中间栈
<input type="button" value="交互变色" onclick="jjh()"/>
<script>
function jjh() {
    let fgcolor=document.fgcolor;
    let bgColor=document.bgColor;
    document.bgColor=fgcolor;
    document.fgcolor=bgColor;
}    
</script>

<h1>URL方法，是用来获取当前页面的网址</h1>
<input type="button" onclick="dqw()" value="当前文档的名称">
<input type="button" onclick="dqw2()" value="当前文件在计算机的哪个盘上？">
<script>
document.write(`当前页面的网址：`+document.URL);
let urls=document.URL;
function dqw() {
    let 位置=0;
    if (urls.indexOf(`\\`)!=-1) {
        位置=urls.lastIndexOf(`\\`);
    } else {
        位置=urls.lastIndexOf(`/`);
    }
    let filename=urls.substr(位置+1);
    alert(`当前文档的名称是：`+filename);
}
function dqw2() {
    if (urls.indexOf(`\\`)!=-1) {
        alert(`当前文件位于计算的：`+urls.substr(7,1)+`盘`);
    } else {
        alert(`当前文件位于计算的：`+urls.substr(8,1)+`盘`);
    }
}
</script>

<h1>使用write方法可以输出数据，还可以使用writeln方法，输出带\n的符号，仅能在pre标签中识别</pre></h1>
<script>
document.write(`我爱中国`);
document.write(`是一名程序员`);
document.write(`我爱中国`);
</script>
<pre>
<script>
document.writeln(`逐浪很优秀`);
document.writeln(`它是免费开源的`);
document.writeln(`基于微软黑科技`);
</script>
</pre>

<h1>使用createElement()方法可以动态添加一个标记</h1>
<form id="as1" name="form3">
    <input type="button" name="btn1" value="动态添加文本框" onclick="addinput()" />
    <input type="button" name="btn2" value="动态添加文字" onclick="addinput2()" />
</form>
<script>
function addinput() {
    let 我要的添=document.createElement(`input`);
    我要的添.type=`text`;
    我要的添.value=`逐浪软件优秀CMS`;
    我要的添.name=`txt`;
    document.form3.appendChild(我要的添);
//   document.getElementById(`as1`).appendChild(我要的添);  //与上一行功能等价

}
const www=`逐浪CMS智能小程序后台`;
    let i=0;
function addinput2() {

    let 我要的添2=document.createElement(`p`);
    我要的添2.style.color=`red`;
    我要的添2.innerHTML=www.charAt(i);
    document.form3.appendChild(我要的添2);
    i++;
}
</script>

<h1>获取文本框并修改内容</h1>
<input type="text" id="txt3" value="逐浪CMS全面开源免费" />
<div id="ff">aaaaaa</div>
<input type="button"  value="换个说法-更改文本内容"  name="btn" onclick="chg()" />
<input type="button"  value="换个说法-更改文本内容"  name="btn" onclick="chg2()" />
<script>
function chg() {
    let t=document.getElementById(`txt3`);
    t.value=`打造中国最强网站后台系统`;
}
function chg2() {
    let t=document.getElementById(`ff`);
    t.innerHTML=`打造中国最强网站后台系统`;
}
</script>

</body>
</html>